import React, { useRef } from "react";
import './index.css'
import Top from '../../components/top'
import { Tabs, Dialog } from 'react-vant'
import { addAddress } from "../../api/address";
import { Radio } from 'react-vant';
import { withRouter } from "react-router-dom";

function Newaddress(props) {
    let items = ['家', '公司', '学校', '其他']
    const name = useRef(null)
    const phones = useRef(null)
    const address = useRef(null)
    const house_number = useRef(null)
    let addres = ( names, phones, addressed, house_numbers) => {
        if (names === '' || phones === '' || addressed === '' || house_numbers === '') {
            Dialog.alert({
                message: '输入框不能为空'
            })
        } else {
            let data = { uid: 'u1', name: names, phone: phones, address: addressed, House_number: house_numbers }
            addAddress(data).then((res) => {
                console.log(res);
            })
            props.history.push('/Layout/takeout')
        }
    }
    return (
        <div>
            <div className="newaddress">
                <Top title="新建地址"></Top>
                <ul className="list">
                    <li>
                        <p>联系人</p>
                        <input type="text" placeholder="请填写收货人的姓名" ref={name} />
                    </li>
                    <li>
                        <p>性别</p>
                        <Radio.Group defaultValue="1" direction="horizontal">
                            <Radio name="1">男</Radio>
                            <Radio name="2">女</Radio>
                        </Radio.Group>
                    </li>
                    <li>
                        <p>手机号</p>
                        <input type="text" placeholder="请填写收货手机号码" ref={phones} />
                    </li>
                    <li>
                        <p>收货地址</p>
                        <input type="text" placeholder="点击选择" ref={address} />
                    </li>
                    <li>
                        <p>门牌号</p>
                        <input type="text" placeholder="例：B座6楼602室" ref={house_number} />
                    </li>
                </ul>
                <div className='demo-tabs'>
                    <Tabs border type='capsule' color='rgb(193, 23, 45)'>
                        {items.map(item => (
                            <Tabs.TabPane key={item} title={item}></Tabs.TabPane>
                        ))}
                    </Tabs>
                </div>
                <button
                    onClick={() => {
                        addres(
                            name.current.value,
                            phones.current.value,
                            address.current.value,
                            house_number.current.value,
                        )
                    }}
                >保存</button>
            </div>
        </div>
    )
}
export default withRouter(Newaddress)
